* {
    margin: 0px;
    padding: 0px;
}

body {
    width: 100%;
    height: 100%;
    background-color: aqua;
}

li {
    list-style: none;
    float: left;
    margin: 0px 5px;
}
input{
    display: none;
}
.swiperBox {
    width: 500px;
    height: 250px;
    margin: 20px auto;
}
.imgBox,
.imgBox img {
    width: 500px;
    height: 250px;
}
.imgBox img{
    box-shadow: 0px 0px 10px rgb(184, 184, 184);
    transform: scale(1.1);
    opacity: 0;
    transition: 1s;
    position: absolute;
}

/* 底部img */
.imgMin {
    width: 500px;
    margin: 30px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imgMin img {
    width: 100px;
    height: 50px;
    border: 2px solid rgb(99, 43, 4);
    opacity: 0.7;
    
}

input:nth-child(1):checked~.imgBox img:nth-child(1){
    transform: scale(1);
    opacity: 1;
}
input:nth-child(1):checked~.imgMin li:nth-child(1) img{
    opacity: 1;
}


input:nth-child(2):checked~.imgBox img:nth-child(2){
    transform: scale(1);
    opacity: 1;
}
input:nth-child(2):checked~.imgMin li:nth-child(2) img{
    opacity: 1;
}


input:nth-child(3):checked~.imgBox img:nth-child(3){
    transform: scale(1);
    opacity: 1;
}
input:nth-child(3):checked~.imgMin li:nth-child(3) img{
    opacity: 1;
}


input:nth-child(4):checked~.imgBox img:nth-child(4){
    transform: scale(1);
    opacity: 1;
}
input:nth-child(4):checked~.imgMin li:nth-child(4) img{
    opacity: 1;
}



